<template>
	<main class="prince-container">
		<div class="archive col-md-8 col-xs-12">
			<div class="post-item">
				<!-- <div v-if="routes.length > 0" class="post-item"> -->
				<!-- <a v-for="(item,index) in routes" :key="index" :href="(route.type === 0 ? '?route=archive':'?route=blog') + formatUrl(route.route)" class="post-item-link"> -->
				<p v-for="(item,key) in routes" :key="key" class="post-item-link">
					<span v-if="key != '_blog_'" @click="openDir(key)" class="col-sm-12 col-xs-12">
						<a style="cursor:pointer">
							<span class="post-title col-sm-9 col-xs-7">
								📁 {{ key }}
							</span>
							<span class="post-date col-sm-3 col-xs-5">📚</span>
						</a>
					</span>
					<span v-else class="col-sm-12 col-xs-12" v-for="(blog,index) in item" :key="key + '_' + index">
						<a style="cursor:pointer">
							<span @click="openBlog(blog)" class="post-title col-sm-9 col-xs-7">
								📖 {{ blog.name }}
							</span>
							<span class="post-date col-sm-3 col-xs-5">{{ blog.path.match(/(.*)\/[^/]*$/)[1].replace("blog/", "") }}</span>
						</a>
					</span>
				</p>
			</div>
			<!-- <div v-else class="post-item">
				暂无博文
			</div> -->
		</div>
		<aside class="sidebar col-md-4 col-xs-12">
			<div class="aboutme widget">
				<h3 class="aside-title">关于我</h3>
				<div v-highlight class="author_concise_div" v-html="makeHtml(author.content)"></div>
			</div>
			<div class="all-tags widget">
				<h3 class="aside-title">代码贡献者</h3>
				<div class="all-tags-box">
					<a v-for="(contribution, index) in contributions" :key="index" :href="contribution.html_url" target="_blank" class="tag-link">
						<div style="text-align: center;">
							<div style="width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: 0 auto;">
								<img :src="contribution.avatar_url" alt="avatar" style="width: 100%; height: 100%;">
							</div>
							<div style="margin-top: 10px;">{{contribution.name}}</div>
						</div>
					</a>
				</div>
			</div>
			<div class="follow-me widget">
				<h3 class="aside-title">关注我</h3>
				<div class="follow-icons">
					<a href='https://gitee.com/bok/bok/' target="_blank"><img src='https://gitee.com/bok/bok/badge/star.svg?theme=white' alt='star'></img></a>
					<a href="tencent://Message/?Uin=773693284&websiteName=qzone.qq.com&Menu=yes" target="_blank">🐧</a>
					<a href="mailto:zhiqiang94@vip.qq.com?subject=[自bok.gitee.io博客的一位访客来信~]" target="_blank">📧</a>
					<!--          <a class="twitter-link" href="https://twitter.com/YiliaShaw" target="_blank"></a>-->
					<!--          <a class="weibo-link" href="http://weibo.com/kathleenxiao" target="_blank"></a>-->
				</div>
			</div>
		</aside>
	</main>
</template>

<script>
	// 创建showdown实例（实现markdown转html）
	var converter = new showdown.Converter();
	module.exports = {
		name: "archive",
		props: ['route', 'fire'],
		data() {
			return {
				errorMsg: '',
				routes: [],
				// 代码贡献者
				contributions: [],
				praiseTop5: [],
				author: {
					/*内容*/
					content: '',
				},
				expanded: []
			}
		},
		//在这里调用ajax请求方法
		created() {
			this.init();
			this.loadRoute(app.getQueryString('dir') || '');
		},
		// 定义自定义指令 v-highlight 代码高亮
		directives: {
			highlight: {
				update(el) {
					let blocks = el.querySelectorAll("pre code");
					blocks.forEach((block) => {
						hljs.highlightBlock(block);
					});
				},
			},
		},
		methods: {
			init() {
				let this_ = this;
				axios.get('./blog/author_concise.md', {
					params: {}
				}).then(function(response) {
					if (response.status == 200) {
						this_.author.content = response.data;
					} else {
						layer.msg('请求失败', {
							time: 1500
						});
					}
				}).catch(function(error) {
					console.log(error);
				});
				// 代码贡献者
				let contributions = sessionStorage.getItem('contributions');
				if (null == contributions) {
					axios.get('https://gitee.com/api/v5/repos/bok/bok/collaborators?page=1&per_page=100&access_token=' + access_token)
						.then(function(response) {
							if (response.status == 200) {
								this_.contributions = response.data;
								sessionStorage.setItem('contributions', JSON.stringify(this_.contributions));
							} else {
								layer.msg("服务异常");
							}
						}).catch(function(error) {
							layer.msg("服务异常");
						});
				} else {
					this.contributions = JSON.parse(contributions);
				}
			},
			loadRoute(dir) {
				/* let this_ = this;
				axios.get('./directory.json', {
					params: {}
				}).then(function(response) {
					if (response.status == 200) {
						// 计算要展示的内容
						this_.routes = this_.findValueByKey(this_.convertToTree(response.data), "blog/" + dir);
					} else {
						layer.msg("请求失败");
					}
				}).catch(function(error) {
					window.location.href = '/404' + window.location.pathname;;
				}); */
				
				this.routes = this.findValueByKey(this.convertToTree(blogs), "blog/" + dir);
			},
			makeHtml(text) {
				return converter.makeHtml(text);
			},
			formatUrl(value) {
				return /^[/|\\]/.test(value) ? value.substr(1) : value;
			},
			findValueByKey(obj, path) {
				if (path === '' || obj === undefined) {
					return obj;
				}
				const keys = path.split('/');
				let value = obj;
				for (let key of keys) {
					if (key != '') {
						if (value && value.hasOwnProperty(key)) {
							value = value[key];
						} else {
							return undefined;
						}
					}
				}
				return value;
			},
			openDir(dir) {
				var oldDir = app.getQueryString('dir');
				window.location.href = '?route=archive&dir=' + (oldDir ? oldDir + "/" : '') + dir;
			},
			openBlog(blog) {
				window.location.href = '?route=blog&title=' + blog.name + '&path=' + blog.path;
			},
			convertToTree(data) {
				const tree = {};
				data.forEach(item => {
					const pathArr = item.path.split('/');
					let currentLevel = tree;
					pathArr.forEach((path, index) => {
						if (index === pathArr.length - 1) {
							currentLevel['_blog_'] = currentLevel['_blog_'] || [];
							currentLevel['_blog_'].push(item);
						} else {
							currentLevel[path] = currentLevel[path] || {};
							currentLevel = currentLevel[path];
						}
					});
				});
				return tree;
			}
		},
		filters: {
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
		}
	}
</script>

<style scoped>
	.author_concise_div {
		border: 1px dotted #dcdcdc;
		text-align: center;
		padding: 10px 5px 5px;
	}

	.author_concise_div hr {
		margin-top: 0;
		margin-bottom: 10px;
	}
</style>
